<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>太阳</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
            background-color: black;
        }
    </style>
</head>
<body>
<button id="bt">绘制太阳</button>
<br>
<br>

</body>

<script>


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height



    const generateSun = () => {

        generateAnimation();
    }

    let deg = 0;
    const earth=()=>{
        //开始时保留
        ctx.save();
        let rSun = 80;
        let rEarth = 20;
        let rMoon = 10;

        ctx.clearRect(0, 0, 600, 600);
        //画出太阳
        ctx.beginPath();
        ctx.fillStyle='yellow';
        ctx.shadowColor='yellow'
        ctx.shadowBlur=15
        ctx.arc(canvas.width/2,canvas.height/2,rSun,0,deg2Arc(360));
        ctx.fill();
        ctx.closePath();


        //画出地球
        ctx.beginPath();
        //把原点移动到正中心
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(deg2Arc(deg));

        ctx.fillStyle = 'blue';
        ctx.shadowBlur=0
        ctx.arc(80 + 70, 0 , rEarth, 0, deg2Arc(360));
        ctx.fill();
        ctx.closePath();

        //画出月亮
        ctx.beginPath();
        ctx.fillStyle = 'white';
        ctx.shadowBlur=0
        ctx.arc(80 + 70 + 40, 0, rMoon, 0, deg2Arc(360));
        ctx.fill();
        ctx.closePath();

        deg = (deg + 1) % 361;
        //结尾恢复
        ctx.restore();
        requestAnimationFrame(earth);
    }

    const generateAnimation = () => {
        requestAnimationFrame(earth);
    };

    const button = document.getElementById('bt');
    button.addEventListener('click', generateAnimation);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>